<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        body{
            background-color: red;
        }

        @media  screen  and (device-width:320px){
            body{
                background-color: blue;
            }
        }
        @media  screen  and (device-width:375px){
            body{
                background-color: pink;
            }
        }
    
    </style>
</head>
<body>
    1、touchstart
    1、判断单手指
    2、获取触摸点的坐标
    3、获取时间戳
2、touchend
    1、判断单手指
    2、判断时间戳的差值
    3、判断抖动值=endX-startX < 6

    4、以上条件都满足说明轻触事件满足了


实现点击功能
    1、绑定点击事件  tap   传入两个参数
    2、获取当前点击的那一个具体的li元素  var  li=e.target.parentNode
    3、设置样式
        1、循环所有的li 
        2、轻触所有的li的类名

        3、给当前元素添加一个类名 e.target.parentNode
    4、实现盒子偏移
        1、给每一个li绑定index（索引）   循环所有的li   ====lis[i].index=i
        2、获取当前点击li元素的索引   li.index
        3、判断偏移值的范围
            1、如果-index*height < 最小的静止值   =====偏移值=最小的静止值   重置currentY=最小的静止值
            2、否则=====偏移值=-index*height    重置currentY=-index*height

rem
    1、em=====参照于自身或者父元素或者往上找的父元素身上有font-size
    2、rem====参照于html的font-size

</body>
</html>